<template>
	<view class="content">
		<view class="person">
			<view class="user flex-center-start">
				<view class="avatar flex-center">
					<image :src="avatarUrl" mode="widthFix" />
					<button open-type="chooseAvatar" @chooseavatar="chooseavatar"></button>
				</view>
				<input id="nickname" type="nickname" name="nickname" v-model="nickName" data-name="hello1"
					placeholder="授权个人信息" placeholder-color="#1F1F1F" @nicknamereview="getNickName" />
			</view>
			<view class="order">
				<view class="title">
					我的订单
				</view>
				<view class="list">
					<view class="flex-center-col" @click="switchOrder('all')">
						<icon title="order" size="18" color="#1F1F1F"></icon>
						<text>全部订单</text>
					</view>
					<view class="flex-center-col" @click="switchOrder('no')">
						<view class="use-tip flex-center" v-if="noUserNum">{{
							noUserNum }}
						</view>
						<icon title="juan" size="18" color="#1F1F1F"></icon>
						<text>待使用</text>
					</view>
					<view class="flex-center-col" @click="switchOrder('used')">
						<icon title="done" size="18" color="#1F1F1F"></icon>
						<text>已完成</text>
					</view>
					<view class="flex-center-col" @click="switchOrder('refund')">
						<icon title="money" size="18" color="#1F1F1F"></icon>
						<text>退款订单</text>
					</view>
				</view>
			</view>
			<view class="mybook flex-center-start" @click="toOrder">
				<icon title="book" size="18" color="#1F1F1F"></icon>
				<text>我的预约</text>
			</view>
			<view class="offline flex-center-start" @click="toOffline">
				<icon title="offline" size="18" color="#1F1F1F"></icon>
				<text>线下登记</text>
			</view>
			<view></view>
		</view>
		<tab></tab>
	</view>
</template>

<script>
import tab from '../../components/tab/tab.vue';
import icon from '../../components/icon/icon.vue';
import userUrl from '@/static/defaultUser.png';
import { orderState } from '../../utils/stateEnum';
import { api_url, img_url } from '../../request/index';
import {
	mapState,
	mapActions,
	mapMutations
} from 'vuex';
export default {
	components: {
		tab,
		icon
	},
	data() {
		return {
			avatarUrl: userUrl,
			nickName: '授权个人信息',
			noUserNum: 0,
		}
	},
	onLoad(options) {
		console.log('person', this.userInfo);
		if (this.userInfo.username) this.nickName = this.userInfo.username;
		if (this.userInfo.avatar) this.avatarUrl = img_url + this.userInfo.avatar;

		this.getOrderList().then((res) => {
			res?.data?.forEach(item => {
				if (item.status == orderState.NOUSE) {
					this.noUserNum++;
				}
			});
		});
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo // 确保这里引用正确
		}),
	},
	methods: {
		...mapActions(['getOrderList',]),
		...mapMutations(['setUserInfo',]),
		getNickName(e) {
			let that = this;
			const query = uni.createSelectorQuery().in(this);
			query.select('#nickname').fields({ properties: ['value'] }, (res) => {
				if (res && res.value) {
					console.log('getNickName', res.value);
					that.$http.updateUserInfo({
						username: res.value,
					}).then(() => {
						uni.setStorageSync('userInfo', { ...that.userInfo, username: res.value });
						that.setUserInfo({ ...that.userInfo, username: res.value });
					})
				}
			}).exec();

		},
		switchOrder(type) {
			uni.navigateTo({
				url: '/packageA/order/order?type=' + type
			});
		},
		toOrder() {
			uni.navigateTo({
				url: '/packageA/bookList/bookList'
			});
		},
		chooseavatar(e) {
			const { avatarUrl } = e.detail
			console.log('chooseavatar', avatarUrl);
			this.uploadImage(avatarUrl);
		},
		uploadImage(tempFilePath) {
			const that = this;
			uni.uploadFile({
				url: api_url + '/user/upload', // 开发者服务器 url
				filePath: tempFilePath,
				name: 'file', // 必须填写，文件对应的 key
				header: {
					'content-type': 'multipart/form-data', // 必须设置
					"Authorization": 'Bearer ' + uni.getStorageSync('token'),
				},
				success: (uploadFileRes) => {
					const data = JSON.parse(uploadFileRes.data);
					that.avatarUrl = img_url + data.url;
					this.$http.updateUserInfo({
						avatar: data.url,
					}).then(() => {
						uni.setStorageSync('userInfo', { ...that.userInfo, avatar: data.url });
						this.setUserInfo({ ...that.userInfo, avatar: data.url });
					})
				},
				fail: () => {
					console.log('上传失败');
				}
			});
		},
		toOffline() {
			uni.navigateTo({
				url: '/packageA/offlineList/offlineList'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.person {
	width: auto;
	max-height: 100%;
	overflow-y: auto;
	padding: 18px 18px 82px 18px;
	font-size: 14px;
}

.flex-center-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.user {
	height: 52px;
	background-color: transparent;
	border: none;
	outline: none;
	padding: 0;
	font-size: 14px;

	&::after {
		border: none;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
		border: 1px solid $primary-color;
		overflow: hidden;
		position: relative;

		image {
			width: 50px;
			height: 50px;
		}

		button {
			width: 50px;
			height: 50px;
			background: transparent;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.nickname {
		position: relative;
		overflow: hidden;
	}
}

.order {
	font-size: 12px;

	.title {
		margin: 31px 0 23px 0;
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 18px;
		position: relative;
		border-bottom: 1px solid #eeeeee;

		text {
			margin-top: 6px;
		}

		>view {
			position: relative;

			.use-tip {
				position: absolute;
				width: 16px;
				height: 16px;
				border-radius: 50%;
				color: #fff;
				top: -6px;
				right: 0;
				background-color: #019E01;
			}
		}
	}
}

.mybook,
.offline {
	font-size: 12px;
	border-bottom: 1px solid #eeeeee;
	padding: 15px 5px;

	text {
		margin-left: 12px;
	}
}
</style>